<template>
  <div class="list" ref="wrapper">
    <!-- better-scroll滚动区域 start -->
    <div>
      <!-- 当前城市 start -->
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="city-list">
          <ul>
            <li class="current-city">{{ city }}</li>
          </ul>
        </div>
      </div>
      <!-- 当前城市 end -->

      <!-- 热门城市 start -->
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="city-list">
          <ul>
            <li
              v-for="city in hotCities"
              :key="city.id"
              @click="handleSelectCity(city.name)"
            >
              {{ city.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 热门城市 end -->

      <!-- 按字母顺序的城市 start-->
      <div class="area" v-for="(cityList, key) in cities" :ref="key">
        <div class="title border-topbottom">{{ key }}</div>
        <div class="city-list">
          <ul>
            <li
              v-for="city in cityList"
              :key="city.id"
              @click="handleSelectCity(city.name)"
            >
              {{ city.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 按字母顺序的城市 end-->
    </div>
    <!-- better-scroll滚动区域 start -->
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapState, mapActions } from "vuex";

export default {
  name: "CityList",
  props: {
    hotCities: {
      type: Array
    },
    cities: {
      type: Object
    }
  },
  methods: {
    ...mapActions(["selectCity"]),
    // 点击右侧字母，跳转到对应首字母的城市列表
    handleLetter(letter) {
      if (letter) {
        const element = this.$refs[letter][0];
        this.scroll.scrollToElement(element);
      }
    },
    // 选择城市,并返回首页
    handleSelectCity(city) {
      this.selectCity(city);

      // 1s 后跳转到首页
      this.$router.push({
        name: "Home"
      });
      111
    }
  },
  computed: {
    ...mapState(["city"])
  },
  mounted() {
    // better-scroll滚动
    this.scroll = new BScroll(this.$refs.wrapper, { click: true, tap: true });
    // 监听事件
    this.$bus.$on("handleLetterclick", this.handleLetter);
  },
  beforeDestroy() {
    this.$bus.$off("handleLetterclick");
  }
};
</script>

<style lang="less" scoped>
.border-topbottom {
  &:before {
    border-color: #ccc;
  }
  &:after {
    border-color: #ccc;
  }
}
.list {
  position: absolute;
  top: 1.46rem;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

.title {
  height: 0.54rem;
  padding: 0.05rem 0 0.05rem 0.2rem;
  font-size: 0.26rem;
  color: #666;
  line-height: 0.54rem;
  background-color: #eee;
}

.city-list {
  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
  background-color: #fff;
  .current-city {
    color: skyblue;
    border: 0.02rem solid skyblue;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    li {
      width: 31%;
      margin: 0 0.12rem 0.12rem 0;
      padding: 0.1rem 0;
      border: 0.02rem solid #ccc;
      border-radius: 0.08rem;
      text-align: center;
      background-color: #fff;
      box-sizing: border-box;
      &:hover {
        background-color: skyblue;
        color: #fff;
      }
    }
  }
}
</style>
